// src/components/Login.jsx
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../../context/AuthContext';

function Login() {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const navigate = useNavigate();
    const { login } = useAuth();
    //useAuth() 能够获取 login 方法的关键在于 Context Provider的价值传递机制。以下是完整的解析：
    //AuthProvider (提供value) → Context对象 → useAuth() Hook → 组件中使用

    const handleLogin = (e) => {
        e.preventDefault();
        // 这里应该是你的实际登录逻辑
        login(); // 更新认证状态
        navigate('/dashboard');
    };

    return (
        <div className="login-container">
            <h2>Login</h2>
            <form onSubmit={handleLogin}>
                <input
                    type="text"
                    placeholder="Username"
                    value={username}
                    onChange={(e) => setUsername(e.target.value)}
                />
                <input
                    type="password"
                    placeholder="Password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                />
                <button type="submit">Login</button>
            </form>
        </div>
    );
}

export default Login;
